<template>
    <div class="mt-4">
        <v-data-table
            item-key="id"
            :headers="headers"
            :items="items"
            no-data-text="没有数据..."
            hide-default-footer
        >
            <template v-slot:top>
                <v-row dense v-if="is_manager || is_supper">
                    <v-col :cols="12" >
                        <v-btn small depressed class="float-right" color="primary" @click="dialog = true">添加</v-btn>
                    </v-col>
                </v-row>
            </template>
            <template v-slot:[`item.actions`]="{ item, index }">
                <v-btn v-if="is_manager || is_supper" small depressed @click="remove(item, index)" :loading="item.deleting">移除</v-btn>
            </template>
        </v-data-table>

         <v-dialog
            v-model="dialog"
            persistent
            max-width="400px"
        >
            <v-form ref="form">
                <v-card>
                    <v-card-title>
                        <span class="text-h5">新增管理员</span>
                    </v-card-title>
                    <v-card-text>
                    <v-row>
                        <v-col cols="12">
                            <AutocompleteUserOfOrg :id="id" :rules="[rules.required]" v-model="selectedUser"></AutocompleteUserOfOrg>
                        </v-col>
                    </v-row>
                    
                    </v-card-text>
                    <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn  depressed   @click="dialog = false" :disabled="saving">
                        关闭
                    </v-btn>
                    <v-btn   depressed  color="primary" dark  @click="add()" :loading="saving">
                        确定
                    </v-btn>
                    </v-card-actions>
                </v-card>
            </v-form>
        </v-dialog>
       
    </div>
</template>

<script>
    import axios from "axios";
    import AutocompleteUserOfOrg from "../../../widgets/AutocompleteUserOfOrg.vue";
    import { mapGetters } from 'vuex';

    export default {
    data: () => ({
        id: 0,
        headers: [
                { text: '序号', value: 'id' },
                { text: '姓名', value: 'name' },
                { text: '手机号', value: 'mobile' },
                { text: '岗位', value: 'role' },
                { text: '性别', value: 'gender_name' },
                { text: '状态', value: 'status_name' },
                { text: '加入时间', value: 'created_at' },
                { text: '操作', value: 'actions', sortable: false },
            ],
        rules: {
            required: value => !!value || '必填',
        }, 
        items: [],
        id: 0,
        dialog: false,
        selectedUser: null,
        saving: false
    }),

    components: {
        AutocompleteUserOfOrg: AutocompleteUserOfOrg,
    },

    computed: {
        ...mapGetters([
            'is_supper',
            'is_manager'
        ]),
    },

    created() {
        this.id = parseFloat(this.$route.params.id);
        this.load();
    },

    beforeRouteUpdate(to, from, next) {
        this.id = parseFloat(to.params.id);
        this.load();
        next();
    },

    methods: {
            load() {
                axios.get(`/org/${this.id}/manager`).then((response) => {
                    this.items = response.data.data.map(v => {
                        return {...v, deleting: false}
                    });
                })
                .catch(function () {})
                .then(function () {});
            },

            remove(item, index) {
                 const that = this;
                 that.items[index].deleting = true;
                 axios.post(`/org/${this.id}/manager`, { user_id:item.id, is_manager:0 }).then((response) => {
                    if (response.data.code == 0) {
                        this.load();
                    }
                   
                    this.$toast.open({
                        message: response.data.msg,
                        type: response.data.code == 0 ? 'success' : 'error',
                        position: 'top-right',
                    });
                }).catch(function () {})
                .then(function () {
                    that.items[index].deleting = false;
                });
            },

            add() {
                if (!this.$refs.form.validate()) {
                    return;
                }

                 const that = this;
                 that.saving = true;
                 axios.post(`/org/${this.id}/manager`, { user_id: this.selectedUser.id, is_manager: 1 }).then((response) => {
                    if (response.data.code == 0) {
                        this.load();
                        this.dialog = false;
                    }
                   
                    this.$toast.open({
                        message: response.data.msg,
                        type: response.data.code == 0 ? 'success' : 'error',
                        position: 'top-right',
                    });
                }).catch(function () {})
                .then(function () {
                    that.saving = false;
                });
            }
        }
    };
</script>
